<template>
  <div class="affetp-aireff">
    <div class="flex">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <div @click="btnClick">
          <i
            :class="active == true ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          ></i>
        </div>
      </div>
      index : {{ newValue }}
    </div>
    <div></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      newValue: null,
      active: true,
    };
  },
  watch: {
    $route: {
      handler(newValue) {
        this.newValue = newValue.query.index;
      },
    },
    immediate: true,
    deep: true,
  },
  created() {
    this.newValue = this.$route.query.index; // 初始化的时候进行赋值
  },
  computed: {
    ...mapGetters(["isCollapse"]),
  },
  methods: {
    btnClick() {
      this.active = !this.active;
      this.$store.state.isCollapse = !this.active;
    },
  },
};
</script>

<style lang="scss">
.affetp-aireff {
  .flex {
    flex: 3;
  }
  .breadcrumb {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #f5f5f5;
    .el-icon-s-unfold:before {
      font-size: 32px;
      cursor: pointer;
    }
    .el-icon-s-fold:before {
      font-size: 32px;
      cursor: pointer;
    }
  }
}
</style>
